<template>
  <div>
    <el-card class="room-mng">
     <el-tabs>
       <el-tab-pane label="基本信息">
         <baseinfo  />
       </el-tab-pane>
      <el-tab-pane label="房间图片墙">
          <newImageUpload  @get-img-list="getImgList($event)" />
         <el-row justify="center" type="flex">
            <el-button @click="btnSave" type="primary">提交</el-button>
         </el-row>
         <el-row type="flex" justify="space-around" >
           <el-col  :span="6" v-for="(item,index) in roominfo.image" :key="index" class="roomimage">
             <i @click="deleteimg(index)" class="el-icon-delete deleteimg"></i>
             <img :src="item.url" alt="" class="roomimgs"/>
           </el-col>
         </el-row>
       </el-tab-pane>
         <el-tab-pane label="收支情况">
         <turnover  />
       </el-tab-pane>
     </el-tabs>
    </el-card>
  </div>
</template>

<script>
import baseinfo from './baseinfo'
import ImageUpload from '@/components/ImageUpload'
import newImageUpload from '@/components/newImageUpload'
import { getroom ,repairRoom} from '@/api/rooms'
import  turnover from './turnover'
export default {
  data(){
    return {
      image:[],
      rommId:this.$route.params.id,
      roominfo:{}
    }
  },
  components:{
    baseinfo,
    ImageUpload,
    newImageUpload,
    turnover
  },
  created(){
    this.getPhoto()
  },
  methods:{
   async getPhoto(){
     this.roominfo= await getroom(this.rommId)
    //  console.log(this.roominfo.image);
    },
    getImgList(data){
      // this.image=data.fileList
      this.roominfo.image.push(data.thisData)
    },
  async btnSave(){
      await repairRoom(this.roominfo)
      this.$message.success('上传成功')
      this.getPhoto()
    },
  async  deleteimg(index){
      this.roominfo.image.splice(index,1)
      await repairRoom({...this.roominfo})
      this.$message.success('删除成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.room-mng {
  max-width: 90%;
  margin: 30px auto;
}
.roomimage{
  position: relative;
  .roomimgs{
  width: 100%;
  display: block;
  }
   .deleteimg{
     z-index: inherit;
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff;
  }
}

</style>
